/**
 * 目标1：获取文章列表并展示
 *  1.1 准备查询参数对象
 *  1.2 获取文章列表数据
 *  1.3 展示到指定的标签结构中
 */
//  1.1 准备查询参数对象    分页，筛选，都通过修改里面的属性值,然后调用渲染函数实现
const queryObj = {
  status: '', // 文章状态（1-待审核，2-审核通过）空字符串-全部
  channel_id: '', // 文章频道 id，空字符串-全部
  page: 1, // 当前页码
  per_page: 2 // 当前页面条数
}
let totalCount = 0 // 保存文章总条数
// 渲染函数
async function setArtileList() {
  //1.2 获取文章列表数据
  const res = await axios({
    url: '/v1_0/mp/articles',
    params: queryObj
  })
  // console.log(res) // 获取数据成功
  console.log(res.data.results) // 获取需要渲染的数据
  //  1.3 展示到指定的标签结构中
  document.querySelector('.art-list').innerHTML = res.data.results
    .map((item) => {
      // 如果有用户上传图片就显示上传的图片，没有图片就用默认的图片
      // 如果 status 为 1-待审核，2-审核通过
      return `<tr>
                <td>     
                  <img src="${item.cover.type === 0 ? `https://img2.baidu.com/it/u=2640406343,1419332367&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=708&amp;h=500` : item.cover.images[0]}" alt="">
                </td>
                <td>${item.title}</td>
                <td>
                ${item.status === 1 ? `<span class="badge text-bg-primary">待审核</span>` : ` <span class="badge text-bg-success">审核通过</span>`}
                </td>
                <td>
                  <span>${item.pubdate}</span>
                </td>
                <td>
                  <span>${item.read_count}</span>
                </td>
                <td>
                  <span>${item.comment_count}</span>
                </td>
                <td>
                  <span>${item.like_count}</span>
                </td>
                <td data-id="${item.id}">
                  <i class="bi bi-pencil-square edit"></i>
                  <i class="bi bi-trash3 del"></i>
                </td>
              </tr>`
    })
    .join('')
  // 3.1 保存并设置文章总页数
  totalCount = res.data.total_count
  document.querySelector('.total-count').innerHTML = `共 ${Math.ceil(totalCount / queryObj.per_page)} 页` //向上取整(总数据 / 当前页面条数)
}
// 调用渲染函数
setArtileList()

/**
 * 目标2：筛选文章列表
 *  2.1 设置频道列表数据
 *  2.2 监听筛选条件改变，保存查询信息到查询参数对象
 *  2.3 点击筛选时，传递查询参数对象到服务器
 *  2.4 获取匹配数据，覆盖到页面展示
 */
//   2.1 设置频道列表数据   他就是将发布文章的获取-所有频道的代码复制过来
async function setChannleList() {
  const res = await axios({
    url: '/v1_0/channels'
  })
  //console.log(res) // 的到响应拦截处理后的数据
  // console.log(res.data.channels) // 需要的数据
  //  1.2 展示到下拉菜单中
  const htmlStr = `<option value="" selected="">请选择文章频道</option>` + res.data.channels.map((item) => `<option value='${item.id}' >${item.name}</option>`).join('')
  // console.log(htmlStr)
  document.querySelector('.form-select').innerHTML = htmlStr
}
// 网页运行后，默认调用一次
setChannleList()
// 2.2 监听筛选条件改变，保存查询信息到查询参数对象
// 筛选状态标记数字->change事件->绑定到查询参数对象上
// 获取三个单选框，分别给他们绑定 change 事件，把点击的对象的 value 赋给 查询信息到查询参数对象的 status
document.querySelectorAll('.form-check-input').forEach((radio) => {
  radio.addEventListener('change', (e) => {
    // console.log(e.target.value)
    queryObj.status = e.target.value
  })
})
// 筛选频道 id -> change事件 -> 绑定到查询参数对象上
// 获取列表，绑定 change 事件 把点击的对象的 value 赋给 查询信息到查询参数对象的 channel_id
document.querySelector('.form-select').addEventListener('change', (e) => {
  queryObj.channel_id = e.target.value
})
// 2.3 点击筛选时，传递查询参数对象到服务器
document.querySelector('.sel-btn').addEventListener('click', () => {
  // 2.4 获取匹配数据，覆盖到页面展示
  setArtileList()
})

/**
 * 目标3：分页功能
 *  3.1 保存并设置文章总页数
 *  3.2 点击下一页，做临界值判断，并切换页码参数并请求最新数据
 *  3.3 点击上一页，做临界值判断，并切换页码参数并请求最新数据
 */
// 3.2 点击下一页，做临界值判断，并切换页码参数并请求最新数据
document.querySelector('.next').addEventListener('click', () => {
  // 当前页码小于最大页码数   当前页码  < 向上取整(总的数据 / 当前页面条数)  也就是  当前页码 < 最大页码数
  if (queryObj.page < Math.ceil(totalCount / queryObj.per_page)) {
    queryObj.page++ //  查询参数对象的当前页数属性值 ++
    // 这里可以使用 page-now 类名 虽然 共几页 也有这个类名 但是 第几页 在他上面，document.querySelector 会获取到符合条件的第一个元素，所以只能获取到第几页
    document.querySelector('.page-now').innerHTML = `第 ${queryObj.page} 页` // 把当前页写入标签
    // 查询渲染文章列表数据
    setArtileList()
  }
})
// 3.3 点击上一页，做临界值判断，并切换页码参数并请求最新数据
document.querySelector('.last').addEventListener('click', () => {
  // 大于 1 的时候，才能翻到上一页
  if (queryObj.page > 1) {
    queryObj.page--
    document.querySelector('.page-now').innerHTML = `第 ${queryObj.page}页`
    setArtileList()
  }
})

/**
 * 目标4：删除功能
 *  4.1 关联文章 id 到删除图标
 *  4.2 点击删除时，获取文章 id
 *  4.3 调用删除接口，传递文章 id 到服务器
 *  4.4 重新获取文章列表，并覆盖展示
 *  4.5 删除最后一页的最后一条，需要自动向前翻页
 */
// 4.1 关联文章 id 到删除图标    在渲染函数里加入 自定义属性 id
//  4.2 点击删除时，获取文章 id    事件委托  委托 tbody
document.querySelector('.art-list').addEventListener('click', async (e) => {
  // 判断点击的是删除元素    点击的对象，类名包含 del 触发
  if (e.target.classList.contains('del')) {
    const delId = e.target.parentNode.dataset.id // 获取 自定义属性 id   在 点击对象的父节点
    // 4.3 调用删除接口，传递文章 id 到服务器
    const res = await axios({
      url: `/v1_0/mp/articles/${delId}`,
      method: 'DELETE'
    })
    // console.log(res)
    //  4.5 删除最后一页的最后一条，需要自动向前翻页   删除成功后，判断 DOM 元素只剩一条，让当前页码 -1
    const children = document.querySelector('.art-list').children // 获取 tbody 的 孩子  也就是 tr标签
    // console.log(children)
    // 如果 tr 标签剩下 1 个 并且 当前页码不等于 1
    if (children.length === 1 && queryObj.page !== 1) {
      queryObj.page-- // 当前页码 -1
      document.querySelector('.page-now').innerHTML = `第 ${queryObj.page} 页` // 重新获取当前页码
    }

    // 4.4 重新获取文章列表，并覆盖展示
    setArtileList()
  }
})

//  4.1 页面跳转传参（URL 查询参数方式）
// 点击编辑时，获取文章 id，跳转到发布文章页面传递文章 id 过去    事件委托 tbody
document.querySelector('.art-list').addEventListener('click', (e) => {
  if (e.target.classList.contains('edit')) {
    const artId = e.target.parentNode.dataset.id
    console.log(artId)
    location.href = `../publish/index.html?id=${artId}`
  }
})
